<template>
  <section class="group-list">
    <simple-slot title="帖子列表">
      <!--<Button type="primary" icon="md-paper" @click="doNew">-->
        <!--创建帖子-->
      <!--</Button>-->
    </simple-slot>
    <div class="inner">
          <CheckboxGroup v-model="checkid" @on-change="checkAllGroupChange">
            <ul>
              <li class="out-list clearfix" v-for="i in list" :key="i.id">
                <Checkbox :label="i.id">
                  <div style="margin-left: 20px;margin-top: -20px">
                    <p style="padding-bottom: 10px;color: #666666;font-size: 15px">{{i.title}}</p>
                    <ul v-if="i.images.length>0">
                      <li v-for="data in i.images"><img :src="$Url+data" alt=""></li>
                    </ul>
                  </div>
                </Checkbox>
                <div class="clearfix" >
                  <span style="display:block;margin-top: 10px;width: 30%;float: left;padding-left: 20px">{{i.addtime | formatDate}}</span>
                  <div class="Content-list">
                    <div class="Content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>123</span></div>
                    <div class="Content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>55</span></div>
                    <div class="Content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>555</span></div>
                  </div>
                  <div class="btn-box float-right">
                    <span class="btn" @click="chakan(i.id,i.circle_id)">编辑</span>
                    <span class="btn" @click="delet(i.id)">删除</span>
                  </div>
                </div>
              </li>
            </ul>
          </CheckboxGroup>
          <div style="padding-top: 20px">
            <Checkbox class="list-top"
                      :indeterminate="indeterminate"
                      :value="checkAll"
                      @click.prevent.native="handleCheckAll">全选
            </Checkbox>
            <span @click="deletlist" style="padding: 5px 12px;color: #FE5371;border: 1px solid #FE5371;margin-left: 10px;cursor: pointer">删除</span>
          </div>
        </div>
  </section>
</template>

<script>
import SimpleSlot from '../../../components/Title/SimpleSlot'
export default {
  name: 'TopicList',
  components: {
      SimpleSlot
  },
   data () {
      return {
          msg: '',
          checkid:[],
          indeterminate: true,
          checkAll: false,
          list:[],
          id:[],
          ids:'',
          // date:''
      }
   },
    created () {
      this.getinfo()
    },
    computed: {
    },
    filters:{
        formatDate:function(time){
            var date = new Date(time * 1000);
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y+M+D+h+m+s;
        },
    },
    methods: {

        chakan (id,cid) {
            this.$router.push({path:'/edit',query:{ids:id,cid:cid}})
        },
        delet (id) {
            let _this =this
            this.$post('/api/circle/delMyPost',
                {
                    post_ids:id
                }, function (res) {
                    _this.$message.success(res.msg);
                    _this.getinfo()
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        deletlist () {
            let _this =this
            _this.ids= _this.checkid.join(',');
            this.$post('/api/circle/delMyPost',
                {
                    post_ids:_this.ids
                }, function (res) {
                    _this.$message.success(res.msg);
                    _this.getinfo()
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        getinfo () {
            let _this =this
            this.$post('/api/circle/myPostList',
                {
                    token:_this.$token,
                    status:0
                }, function (res) {
                    _this.list = res.data
                    _this.list.forEach(function (i) {
                        _this.id.push(i.id)
                    })
                }, function (errcode, errmsg,err) {
                    console.log(err)
                    console.log(errmsg)
                })
        },
        handleCheckAll () {
            if (this.indeterminate) {
                console.log(111)
                this.checkAll = true;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                this.checkid =this.id;
            } else {
                this.checkid = [];
            }
        },
        checkAllGroupChange (data) {
            if (this.checkid.length === this.list.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = false;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        },
    }
}

</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .group-list {
    border: 1px solid @border-color;
    padding: 15px;
    .btn-box {
      text-align: right;
      .btn {
        display: inline-block;
        color: @theme-color;
        border: 1px solid @theme-color;
        font-size: 14px;
        height: 28px;
        line-height: 28px;
        padding: 0 18px;
        margin-right: 16px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .out-list{
      border-bottom: 1px dashed #e0e0e0;
      padding-bottom: 20px;
      padding-top: 20px;
      li{
        float: left;
        margin-left: 10px;
      }
      img{
        width: 56px;
        height: 75px;
      }
      .Content-list{
        float: left;
        width: 280px;
      }
      .Content-list-icon{
        width: 70px;
        height: 30px;
        line-height: 30px;
        float: left;
        margin-left: 22px;
        span{
          padding-left: 8px;
          color: #999999;
        }
      }
      .icom{
        margin-top: -4px;
      }
      .icon{
        color: #999999;
      }
      .time{
        float: left;
        color: #999999;
        width: 150px;
      }
      .Content-list:hover {
        border-bottom: none;
        background-color: #ffffff;
      }

    }
  }
</style>
